<script>
  import Svelvet from "svelvet";
  import { GreaterStencilFunc } from "three";

  const initialNodes = [
    {
      id: 1,
      position: { x: 150, y: 60 },
      data: { label: "Input Node" },
      width: 175,
      height: 40,
      bgColor: "white",
    },
    {
      id: 2,
      position: { x: 10, y: 250 },
      data: { label: "bezier" },
      width: 70,
      height: 40,
      bgColor: "white",
    },
    {
      id: 3,
      position: { x: 152, y: 350 },
      data: { label: "straight" },
      width: 70,
      height: 40,
      bgColor: "white",
    },
    {
      id: 4,
      position: { x: 424, y: 250 },
      data: { label: "animated/labeled" },
      width: 140,
      height: 40,
      bgColor: "white",
    },
    {
      id: 5,
      position: { x: 60, y: 325 },
      data: { label: "no handle" },
      width: 80,
      height: 40,
      bgColor: "white",
    },
    {
      id: 6,
      position: { x: 250, y: 225 },
      data: { label: "arrow handle" },
      width: 100,
      height: 40,
      bgColor: "white",
    },
    {
      id: 7,
      position: { x: 450, y: 25 },
      data: { label: "边的各种表现形式" },
      width: 130,
      height: 40,
      bgColor: "white",
    },
  ];

  const initialEdges = [
    { id: "e1-2", source: 1, target: 2, type: "bezier" },
    { id: "e1-3", source: 1, target: 3, type: "straight" },
    {
      id: "e1-4",
      source: 1,
      target: 4,
      type: "bezier",
      edgeColor: "green",
      animate: true,
      label: "labeled",
    },
    {
      id: "e1-5",
      source: 1,
      target: 5,
      type: "bezier",
      noHandle: true,
      edgeColor: "blue",
    },
    {
      id: "e1-6",
      source: 1,
      target: 6,
      type: "bezier",
      arrow: true,
    },
  ];
</script>

<Svelvet
  movement={false}
  nodes={initialNodes}
  edges={initialEdges}
  bgColor="background: linear-gradient(to top right, rgba(90, 149, 207, 0.5), rgba(58, 76, 99, 0.8));"
/>
